<div id="panelArea" class="panel panel-success" style="margin-bottom: 0px">

  <!--   ****************   Modals' definitions - START -   ****************   -->

  <!-- Rename Class Modal -->
  <modal #renameModal>
    <modal-header [show-close]="true">
      <h4 class="modal-title">Change Class Name</h4>
    </modal-header>
    <modal-body>

      <div class="row">
        <div class="form-group">
          <form class="form-horizontal" #renamePropForm="ngForm">
            <label class="col-md-2 control-label" style="text-align: right;">New name* </label>
            <div class="col-md-10">
              <input type="text" class="form-control" [(ngModel)]="tmpClassName" name="newName" required/>
            </div>
          </form>
        </div>
      </div>

    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <ng-container *ngIf="selectedElement">
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="renameModal.dismiss()">Cancel</button>
        <button *ngIf="selectedElement.name" type="button" class="btn btn-primary" (click)="renameSelectedVertexClass()" [disabled]="!renamePropForm.valid">Rename</button>
        <button *ngIf="!selectedElement.name" type="button" class="btn btn-primary" (click)="renameSelectedEdgeClass()" [disabled]="!renamePropForm.valid">Rename</button>
      </ng-container>
    </modal-footer>
  </modal>

  <!-- Add Property Modal -->
  <modal #addPropModal (onDismiss)="dismissPropertyAdding()">
    <modal-header [show-close]="true">
      <h4 class="modal-title">Add Property</h4>
    </modal-header>
    <modal-body>
      <div class="form-group">
        <form class="form-horizontal" #addPropForm="ngForm">
          <input type="radio" [(ngModel)]="activeFormNewProp" name="activeFormNewProp" value="1" checked> Add New Property<br>
          <div *ngIf="activeFormNewProp==='1'"><br/>
            <div class="row">
              <label class="col-md-2 control-label">Name* </label>
              <div class="col-md-10">
                <input type="text" class="form-control" [(ngModel)]="tmpPropertyDefinition.name" name="name"
                       placeholder="Property name" required/>
              </div>
            </div><br/>
            <div class="row">
              <label class="col-md-2 control-label">Type* </label>
              <div class="col-md-10">
                <select class="form-control" [(ngModel)]="tmpPropertyDefinition.type" name="type"
                        placeholder="Property type" required>
                  <option *ngFor="let type of fullListTypes" [value]="type">
                    {{type}} </option>
                </select><br/>
              </div>
            </div><br/>

            <div class="row">
              <div class="col-md-offset-2 col-md-10">
                <div class="col-md-4">
                  <label class="control-label">Mandatory </label>
                  <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.mandatory" name="mandatory" disabled/>
                </div>
                <div class="col-md-4">
                  <label class="control-label">Read Only </label>
                  <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.readOnly" name="readOnly"/>
                </div>
                <div class="col-md-4">
                  <label class="control-label">Not Null </label>
                  <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.notNull" name="notNull"disabled/>
                </div>
              </div>
            </div>
          </div>

          <br/><br/>

          <input type="radio" [(ngModel)]="activeFormNewProp" name="activeFormNewProp" value="2"> Include Property<br>
          <div *ngIf="activeFormNewProp==='2'"><br/>
            <div class="row">
              <label class="col-md-2 control-label">Property* </label>
              <div class="col-md-10">
                <select2 [data]="excludedPropertiesName"
                         [options]="propsSelectOptions"
                         [width]="400"
                         [value]="selectedPropertiesToInclude"
                         (valueChanged)="updatedSelectedValue($event)" required></select2>
              </div>
            </div><br/>
          </div>
        </form>
      </div>
    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissPropertyAdding()">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="addNewPropToSelectedClass()" [disabled]="!addPropForm.valid">Save</button>
    </modal-footer>
  </modal>

  <!-- Drop Property Modal -->
  <modal #dropPropertyModal (onDismiss)="dismissOrCloseDropPropModal('dismiss')">
    <modal-header [show-close]="true">
      <h4 class="modal-title">Warning!</h4>
    </modal-header>
    <modal-body>
      You are dropping <b>{{tmpPropertyDefinition.name}}</b> property. Are you sure?
    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissOrCloseDropPropModal('dismiss')">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="dismissOrCloseDropPropModal('close')">Ok</button>
    </modal-footer>
  </modal>

  <!-- Edit Property Modal -->
  <modal #editPropertyModal (onDismiss)="dismissEditPropertyModal()">
    <modal-header [show-close]="true">
      <h4 class="modal-title">Property Editing</h4>
    </modal-header>
    <modal-body>

      <div class="form-group">
        <form class="form-horizontal" #editPropForm="ngForm">

          <div class="row">
            <label class="col-md-2 control-label">Name* </label>
            <div class="col-md-10">
              <input type="text" class="form-control" [(ngModel)]="tmpPropertyDefinition.name" name="name"
                     [attr.placeholder]="tmpPropertyDefinition.name" required/>
            </div>
          </div><br/>
          <div class="row">
            <label class="col-md-2 control-label">Type* </label>
            <div class="col-md-10">
              <select class="form-control" [(ngModel)]="tmpPropertyDefinition.type" name="type"
                      [attr.placeholder]="tmpPropertyDefinition.type" required>
                <option *ngFor="let type of partialListTypes" [value]="type" required>
                  {{type}} </option>
              </select><br/>
            </div>
          </div><br/>
          <div class="row">
            <div class="col-md-offset-2 col-md-10">
              <div class="col-md-4">
                <label class="control-label">Mandatory </label>
                <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.mandatory" name="mandatory"/>
              </div>
              <div class="col-md-4">
                <label class="control-label">Read Only </label>
                <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.readOnly" name="readOnly"/>
              </div>
              <div class="col-md-4">
                <label class="control-label">Not Null </label>
                <input type="checkbox" [(ngModel)]="tmpPropertyDefinition.notNull" name="notNull"/>
              </div>
            </div>
          </div>
          <br/><br/>
        </form>
      </div>

    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissEditPropertyModal()">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="closeEditPropertyModal()" [disabled]="!editPropForm.valid">Save</button>
    </modal-footer>
  </modal>

  <!-- Drop Class Modal -->
  <modal #dropClassModal (onDismiss)="dismissOrCloseDropClassModal('dismiss')">
    <modal-header [show-close]="true">
      <h4 class="modal-title">Warning!</h4>
    </modal-header>
    <modal-body>
      You are dropping <b>{{edgeName}}</b> class. Are you sure?
    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissOrCloseDropClassModal('dismiss')">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="dismissOrCloseDropClassModal('close')">Ok</button>
    </modal-footer>
  </modal>

  <!-- Drop Edge Class instance Modal -->
  <modal #dropEdgeInstanceModal (onDismiss)="dismissOrCloseDropEdgeInstanceModal('dismiss')">
    <modal-header [show-close]="true">
      <h4 class="modal-title">Warning!</h4>
    </modal-header>
    <modal-body>
      You are dropping the current selected instance of the <b>{{edgeName}}</b> class. Are you sure?
    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissOrCloseDropEdgeInstanceModal('dismiss')">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="dismissOrCloseDropEdgeInstanceModal('close')">Ok</button>
    </modal-footer>
  </modal>

  <!--   ****************   Modals' definitions - END -   ****************   -->


  <div class="panel-heading" style="height: 41px;">
    <span class="h4 center">Details</span>
  </div>
  <div id="upperArea" class="panel-body" style="height: 255px; overflow: auto;">

    <div *ngIf="selectedElement">

      <!--Vertex rendering-->
      <div *ngIf="selectedElement.name">

        <div class="row">
          <div class="col-md-9">
            <div class="col-md-3" style="margin: 0px; padding: 0px;">
              Vertex Class:
            </div>
            <div class="col-md-9" style="padding-left: 10px; padding-right: 10px;" >
            <span class="hideOverflow" data-toggle="popover"
                  data-placement="top"
                  data-trigger="hover"
                  data-container="body"
                  [attr.data-content]="selectedElement.name">
              <b>{{selectedElement.name}}</b><br><br>
            </span>
            </div>
          </div>
          <div class="col-md-3 btn-group">
            <button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
              Edit Class <span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenRenameClassModal(selectedElement.name)"><a>Rename Class</a></li>
              <li class="divider"></li>
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenAddPropertyModal()"><a><i class="fa fa-plus"></i> &nbsp; Add Property</a></li>
            </ul>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <table class="table table-bordered table-hover table-responsive propAndColumnTable">
              <thead>
              <tr>
                <th class="firstColumn">Property name</th>
                <th class="secondColumn">Property type</th>
                <th class="thirdColumn">Actions</th>
              </tr>
              </thead>
              <tbody>
              <ng-container *ngFor="let propName of propertiesName">
                <tr *ngIf="selectedElement.properties[propName].include">
                  <td class="firstColumn">{{propName}}</td>
                  <td class="secondColumn">{{selectedElement.properties[propName].type}}</td>
                  <td class="thirdColumn">
                    <div class="btn-group">
                      <button class="btn btn-primary btn-xs" (click)=prepareAndOpenPropertyEditingModal(propName)>
                        Edit
                      </button>
                    </div>
                    <div class="btn-group">
                      <button class="btn btn-danger btn-xs" (click)="prepareAndOpenDropPropertyModal(propName)" [disabled]="!canBeExcluded(propName)">
                        <i class="fa fa-trash-o"></i>
                        Drop
                      </button>
                    </div>
                  </td>
                </tr>
              </ng-container>
              </tbody>
            </table>
          </div>
        </div>

      </div>

      <!--Edge rendering-->
      <div *ngIf="!selectedElement.name">

        <div class="row">
          <div class="col-md-9">
            <div class="col-md-3" style="margin: 0px; padding: 0px;">
              Edge Class:
            </div>
            <div class="col-md-9" style="padding-left: 10px; padding-right: 10px;" >
            <span class="hideOverflow" data-toggle="popover"
                  data-placement="top"
                  data-trigger="hover"
                  data-container="#panelArea"
                  [attr.data-content]="edgeName">
              <b>{{edgeName}}</b><br><br>
            </span>
            </div>
          </div>
          <div class="col-md-3 btn-group">
            <button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
              Edit Class <span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenRenameClassModal(edgeName)"><a>Rename Class</a></li>
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenDropClassModal(edgeName)">
                <a data-toggle="popover" data-html="true" data-content="Drop the Edge Class and all its occurrences in the graph."
                   data-trigger="hover" data-placement="left" data-container="#stepAdvanced" data-animation="am-fade-and-scale">Drop Edge Class</a>
              </li>
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenDropEdgeModal(edgeName)">
                <a data-toggle="popover" data-html="true" data-content="Drop just the selected Edge occurrence.<br/>If the selected edge instance is the last one present in the graph,<br/>the Edge Class will be dropped."
                   data-trigger="hover" data-placement="left" data-container="#stepAdvanced" data-animation="am-fade-and-scale">Drop Edge Instance</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-item actions-dropdown-item" (click)="prepareAndOpenAddPropertyModal()"><a><i class="fa fa-plus"></i> &nbsp; Add Property</a></li>
            </ul>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <table class="table table-bordered table-hover table-responsive propAndColumnTable">
              <thead>
              <tr>
                <th class="firstColumn">Property name</th>
                <th class="secondColumn">Property type</th>
                <th class="thirdColumn">Actions</th>
              </tr>
              </thead>
              <tbody>
              <ng-container *ngFor="let propName of propertiesName">
                <tr *ngIf="selectedElement[edgeName].properties[propName].include">
                  <td class="firstColumn">{{propName}}</td>
                  <td class="secondColumn">{{selectedElement[edgeName].properties[propName].type}}</td>
                  <td class="thirdColumn">
                    <div class="btn-group">
                      <button class="btn btn-primary btn-xs" (click)=prepareAndOpenPropertyEditingModal(propName)>
                        Edit
                      </button>
                    </div>
                    <div class="btn-group">
                      <button class="btn btn-danger btn-xs" (click)="prepareAndOpenDropPropertyModal(propName)">
                        <i class="fa fa-trash-o"></i>
                        Drop
                      </button>
                    </div>
                  </td>
                </tr>
              </ng-container>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
<div class="panel panel-success">
  <div id="lowerArea" class="panel-body" style="height: 255px; overflow: auto;">
    <div *ngIf="selectedElement">

      <!--Table rendering-->
      <div *ngIf="!edgeName">

        <div class="row">
          <div class="col-md-8">
            <div class="col-md-2" style="margin: 0px; padding: 0px;">
              Table:
            </div>
            <div class="col-md-10" style="padding-left: 0px;">
            <span class="hideOverflow" data-toggle="popover"
                  data-placement="top"
                  data-trigger="hover"
                  data-container="#panelArea"
                  [attr.data-content]="selectedElement.mapping.sourceTables[0].tableName">
              <b>{{selectedElement.mapping.sourceTables[0].tableName}}</b><br><br>
            </span>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <table class="table table-bordered table-hover table-responsive propAndColumnTable">
              <thead>
              <tr>
                <th class="firstColumn">Column name</th>
                <th class="secondColumn">Column type</th>
                <th class="thirdColumn">Include</th>
              </tr>
              </thead>
              <tbody>
              <ng-container *ngFor="let propName of propertiesName">
                <tr *ngIf="selectedElement.properties[propName].mapping">
                  <td class="firstColumn">{{selectedElement.properties[propName].mapping.columnName}}</td>
                  <td class="secondColumn">{{selectedElement.properties[propName].mapping.type}}</td>
                  <td class="thirdColumn"><input type="checkbox" [(ngModel)]="selectedElement.properties[propName].include"
                                                 (click)="setSelectedElementPropsUpdated(true)" [disabled]="!canBeExcluded(propName)"></td>
                </tr>
              </ng-container>
              </tbody>
            </table>
          </div>
        </div>

      </div>

      <!--Relationship rendering-->
      <div *ngIf="edgeName">

        <svg width="0" height="0" viewBox="0 0 0 0">
          <defs>
            <marker id="arrow-head" viewBox="0 -5 10 10" refX="6" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M0,-5L10,0L0,5" fill="#000" class="arrow-head"></path>
            </marker>
          </defs>
        </svg>

        <div *ngIf="!selectedElement[edgeName].mapping[0].joinTable">
          <b>1-N Relationship</b><br/><br/>

          <div id="divRow" class="row" align="center">
            <div style="width: 150px; height: 180px; display: table-cell;">
              <label class="OneNRelTableLabel" for="fromTable"
                     data-toggle="popover"
                     data-placement="top"
                     data-trigger="hover"
                     [attr.data-content]="selectedElement[edgeName].mapping[0].fromTable">{{selectedElement[edgeName].mapping[0].fromTable}}</label>
              <table id="fromTable" class="table table-bordered table-hover table-responsive OneNRelTable">
                <thead>
                <tr height="25">
                  <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <tr height="100">&nbsp;</tr>
                </tbody>
              </table>

              <table class="OneNRelInfoTable">
                <tfoot>
                <tr>
                  <td>
                    <span *ngIf="fromTableInfo"><u>{{fromTableInfo.label}}</u></span>
                    <ul *ngIf="fromTableInfo && fromTableInfo.columns.length > 0">
                      <li *ngFor="let column of fromTableInfo.columns"
                          data-toggle="popover"
                          data-placement="top"
                          data-trigger="hover"
                          [attr.data-content]="column">{{column}}
                      </li>
                    </ul>
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>

            <div style="width: 75px; height: 180px; display: table-cell;">
              &nbsp;
              <svg width="75px">
                <g (click)="render1NRelationshipInfo(selectedElement[edgeName].mapping[0])" style="cursor: pointer;">
                  <text font-family="FontAwesome" fill="#99ccff" x="30" y="70">
                    &#xf059;
                  </text>
                  <path id="arrow" class="arrow-stem" stroke="#000" stroke-width="1.5px" style="marker-end: url('#arrow-head');"
                        d="M7,80L65,80"></path>
                </g>
              </svg>
            </div>

            <div style="width: 150px; height: 180px; display: table-cell;">
              <label class="OneNRelTableLabel" for="toTable"
                     data-toggle="popover"
                     data-placement="top"
                     data-trigger="hover"
                     [attr.data-content]="selectedElement[edgeName].mapping[0].toTable">{{selectedElement[edgeName].mapping[0].toTable}}</label>
              <table id="toTable" class="table table-bordered table-hover table-responsive OneNRelTable">
                <thead>
                <tr height="25">
                  <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <tr height="100">&nbsp;</tr>
                </tbody>
              </table>

              <table class="OneNRelInfoTable">
                <tfoot>
                <tr>
                  <td>
                    <span *ngIf="toTableInfo"><u>{{toTableInfo.label}}</u></span>
                    <ul *ngIf="toTableInfo && toTableInfo.columns.length > 0">
                      <li *ngFor="let column of toTableInfo.columns"
                          data-toggle="popover"
                          data-placement="top"
                          data-trigger="hover"
                          [attr.data-content]="column">{{column}}
                      </li>
                    </ul>
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>
          </div>

        </div>

        <div *ngIf="selectedElement[edgeName].mapping[0].joinTable">
          <b>N-N Relationship</b><br/><br/>

          <div class="row" align="center">
            <div style="width: 75px; height: 90px; display: table-cell;">
              <label class="NNRelTableLabel" for="extTable1"
                     data-toggle="popover"
                     data-placement="top"
                     data-trigger="hover"
                     [attr.data-content]="selectedElement[edgeName].mapping[0].fromTable">{{selectedElement[edgeName].mapping[0].fromTable}}</label>
              <table id="extTable1" class="table table-bordered table-hover table-responsive NNRelTable">
                <thead>
                <tr height="16">
                  <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <tr height="75">&nbsp;</tr>
                </tbody>
              </table>

              <table class="NNRelInfoTable">
                <tfoot>
                <tr>
                  <td>
                    <span *ngIf="leftTableInfo"><u>{{leftTableInfo.label}}</u></span>
                    <ul *ngIf="leftTableInfo && leftTableInfo.columns.length > 0">
                      <li *ngFor="let column of leftTableInfo.columns"
                          data-toggle="popover"
                          data-placement="top"
                          data-trigger="hover"
                          [attr.data-content]="column">{{column}}
                      </li>
                    </ul>
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>

            <div style="width: 33px; height: 90px; display: table-cell;">
              &nbsp;
              <svg width="50px">
                <style>
                  .arrow .arrow-stem { cursor: pointer; } /* specific elements */
                </style>
                <g class="arrow"(click)="renderNNRelationshipInfo(selectedElement[edgeName].mapping[0], 'left')" style="cursor: pointer;">
                  <text font-family="FontAwesome" fill="#99ccff" x="20" y="55">
                    &#xf059;
                  </text>
                  <path id="leftArrow" class="arrow-stem" stroke="#000" stroke-width="1.5px" style="marker-end: url('#arrow-head');"
                        d="M45,65L7,65"></path>
                </g>
              </svg>
            </div>

            <div style="width: 75px; height: 90px; display: table-cell;">
              <label class="NNRelTableLabel" for="joinTable"
                     data-toggle="popover"
                     data-placement="top"
                     data-trigger="hover"
                     [attr.data-content]="selectedElement[edgeName].mapping[0].joinTable.tableName">{{selectedElement[edgeName].mapping[0].joinTable.tableName}}</label>
              <table id="joinTable" class="table table-bordered table-hover table-responsive NNRelTable">
                <thead>
                <tr height="16">
                  <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <tr height="75">&nbsp;</tr>
                </tbody>
              </table>

              <table class="NNRelInfoTable">
                <tfoot>
                <tr>
                  <td>
                    <span *ngIf="joinTableInfo"><u>{{joinTableInfo.label}}</u></span>
                    <ul *ngIf="joinTableInfo && joinTableInfo.columns.length > 0">
                      <li *ngFor="let column of joinTableInfo.columns"
                          data-toggle="popover"
                          data-placement="top"
                          data-trigger="hover"
                          [attr.data-content]="column">{{column}}
                      </li>
                    </ul>
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>

            <div style="width: 33px; height: 90px; display: table-cell;">
              &nbsp;
              <svg width="50px">
                <style>
                  .arrow .arrow-stem { cursor: pointer; } /* specific elements */
                </style>
                <g class="arrow" (click)="renderNNRelationshipInfo(selectedElement[edgeName].mapping[0], 'right')" style="cursor: pointer;">
                  <text font-family="FontAwesome" fill="#99ccff" x="20" y="55">
                    &#xf059;
                  </text>
                  <path id="rightArrow" class="arrow-stem" stroke="#000" stroke-width="1.5px" style="marker-end: url('#arrow-head');"
                        d="M5,65L43,65"></path>
                </g>
              </svg>
            </div>

            <div style="width: 75px; height: 90px; display: table-cell;">
              <label class="NNRelTableLabel" for="extTable2"
                     data-toggle="popover"
                     data-placement="top"
                     data-trigger="hover"
                     [attr.data-content]="selectedElement[edgeName].mapping[0].toTable">{{selectedElement[edgeName].mapping[0].toTable}}</label>
              <table id="extTable2" class="table table-bordered table-hover table-responsive NNRelTable">
                <thead>
                <tr height="16">
                  <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <tr height="75">&nbsp;</tr>
                </tbody>
              </table>

              <table class="NNRelInfoTable">
                <tfoot>
                <tr>
                  <td>
                    <span *ngIf="rightTableInfo"><u>{{rightTableInfo.label}}</u></span>
                    <ul *ngIf="rightTableInfo && rightTableInfo.columns.length > 0">
                      <li *ngFor="let column of rightTableInfo.columns"
                          data-toggle="popover"
                          data-placement="top"
                          data-trigger="hover"
                          [attr.data-content]="column">{{column}}
                      </li>
                    </ul>
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
